<script lang="ts" setup>
import http from '@/http';
import { Delete, CirclePlus, Search, Refresh } from '@element-plus/icons-vue'
import { onMounted, ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const tableData = ref([])
//挂载完成，获取当前页相关的用户数据
onMounted(() => {
  //调用获取当前页相关用户数据的方法
  getPage()
})

//模态框的显示
const dialogFormVisible = ref(false)
//模态框的宽度
const formLabelWidth = '140px'

//收费
let id = ref('');
const registrationFee = (index: number, row) => {
  id.value=row.patientId;
  dialogFormVisible.value = true;
}

function confirmCharges(){
  http.get('/hisRegistration/chargeHisRegistration?id='+id.value)
  .then((res)=>{
    if (res == 1) {
          //弹出添加成功提示框
          ElMessage({
            message: '缴费成功',
            type: 'success',
          })
          //添加对话框隐藏
          dialogFormVisible.value = false
          //重新当前页的数据
          getPage()
        } else {
          ElMessage({
            message: '缴费失败，请重试',
            type: 'error',
          })
        }
  })
}

//退费
const registeredRefund = (index: number, row) => {
  http.get('/hisRegistration/refundHisRegistration?id='+row.patientId)
  .then((res)=>{
    if (res == 1) {
          //弹出添加成功提示框
          ElMessage({
            message: '退费成功，退款预计24小时后返回付款账户',
            type: 'success',
          })
          //重新当前页的数据
          getPage()
        } else {
          ElMessage({
            message: '退费失败，请重试',
            type: 'error',
          })
        }
  })
}


//部门
let deptId = ref('')
let name = ref('')
let schedulingType = ref('')
let subsectionType = ref('')
let createTime = ref('')

//当前页
let pageNum = ref(1)
//每页条数
let pageSize = ref(4)
//总条数
let total = ref(0)
//获取当前页相关用户数据的方法
function getPage() {
  //参数：当前页号, 每页条数, 搜索用户名
  http.get('/hisRegistration/getAll', {
    params: {
      pageNum: pageNum.value,
      pageSize: pageSize.value,
      deptId: deptId.value,
      name: name.value,
      schedulingType: schedulingType.value,
      subsectionType: subsectionType.value,
      createTime: createTime.value
    }
  }).then((res) => {
    tableData.value = res.list
    total.value = res.total
  })
}

//当前页发生改变
const handleCurrentChange = (val: number) => {
  pageNum.value = val
  //获取当前页的数据
  getPage()
}

//搜索
function searchFor() {
  getPage()
}
//重置
function reset() {
  // 清空所属科室选择框，这里将其重置为空字符串，你可以根据实际需求调整默认值
  deptId.value = '';
  // 清空患者姓名输入框
  name.value = '';
  // 清空挂号类型选择框，这里将其重置为空字符串，你可以根据实际需求调整默认值
  schedulingType.value = '';
  // 清空挂号时间段选择框，这里将其重置为空字符串，你可以根据实际需求调整默认值
  subsectionType.value = '';
  // 清空挂号时间选择框，这里将其重置为空字符串，你可以根据实际需求调整默认值
  createTime.value = '';
}

</script>
<template>
  <el-row type="flex" justify="">
    <el-col :span="6">
      <el-form-item label="所属科室">
        <!-- 输入框绑定age属性，类型为文本，自动补全关闭 -->
        <el-select v-model="deptId" placeholder="请选择所属科室" clearable>
          <el-option label="内科" value="101" />
          <el-option label="外科" value="102" />
          <el-option label="儿科" value="103" />
          <el-option label="妇科" value="104" />
          <el-option label="眼科" value="105" />
          <el-option label="耳鼻喉科" value="106" />
          <el-option label="口腔科" value="107" />
          <el-option label="皮肤科" value="108" />
          <el-option label="其他" value="109" />
        </el-select>
      </el-form-item>
      <div class="grid-content ep-bg-purple"></div>
    </el-col>

    <el-col :span="6">
      <el-form-item label="患者姓名">
        <el-input v-model="name" type="text" autocomplete="off" placeholder="请输入患者姓名" property="name" />
      </el-form-item>
      <div class="grid-content ep-bg-purple"></div>
    </el-col>

    <el-col :span="6">
      <el-form-item label="挂号类型">
        <!-- 输入框绑定age属性，类型为文本，自动补全关闭 -->
        <el-select v-model="schedulingType" placeholder="请选择挂号类型" clearable>
          <el-option label="门诊" value="1" />
          <el-option label="门诊+病例本" value="2" />
          <el-option label="急诊" value="3" />
          <el-option label="急诊+病例本" value="4" />
          <el-option label="孕诊" value="5" />
          <el-option label="孕诊+病例本" value="6" />
        </el-select>
      </el-form-item>
      <div class="grid-content ep-bg-purple"></div>
    </el-col>

    <el-col :span="6">
      <el-form-item label="挂号时间段">
        <!-- 输入框绑定age属性，类型为文本，自动补全关闭 -->
        <el-select v-model="subsectionType" placeholder="请选择挂号时间段" clearable>
          <el-option label="上午" value="1" />
          <el-option label="下午" value="2" />
          <el-option label="晚上" value="3" />
        </el-select>
      </el-form-item>
      <div class="grid-content ep-bg-purple"></div>
    </el-col>

    <el-col :span="6">
      <el-form-item label="挂号时间" prop="registrationTime">
        <div class="block">
          <el-date-picker v-model="createTime" type="date" placeholder="请选择挂号时间" format="YYYY/MM/DD"
            value-format="YYYY-MM-DD" :default-value="new Date(2024, 1, 1)" />
        </div>
      </el-form-item>
      <div class="grid-content ep-bg-purple"></div>
    </el-col>

    <el-col :span="6">
      <el-button type="primary" :icon="Search" @click="searchFor">搜索</el-button>
      &nbsp;
      <el-button type="primary" :icon="Refresh" @click="reset">重置</el-button>
    </el-col>
  </el-row>

  <el-table :data="tableData" border style="width: 100%">
    <el-table-column property="patientName" label="患者名称" />
    <el-table-column label="挂号科室">
      <template #default="scope">
        <span v-if="scope.row.deptId == 101">内科</span>
        <span v-else-if="scope.row.deptId == 102">外科</span>
        <span v-else-if="scope.row.deptId == 103">儿科</span>
        <span v-else-if="scope.row.deptId == 104">妇科</span>
        <span v-else-if="scope.row.deptId == 105">眼科</span>
        <span v-else-if="scope.row.deptId == 106">耳鼻喉科</span>
        <span v-else-if="scope.row.deptId == 107">口腔科</span>
        <span v-else-if="scope.row.deptId == 108">皮肤科</span>
        <span v-else-if="scope.row.deptId == 109">其他</span>
      </template>
    </el-table-column>
    <el-table-column property="doctorName" label="就诊医生" />
    <el-table-column property="regItemAmount" label="挂号费用" />
    <el-table-column property="regNumber" label="流水编号" />
    <el-table-column label="状态">
      <template #default="scope">
        <span v-if="scope.row.regStatus == 0">未收费</span>
        <span v-if="scope.row.regStatus == 1">待就诊</span>
        <span v-if="scope.row.regStatus == 2">就诊中</span>
        <span v-if="scope.row.regStatus == 3">就诊完成</span>
        <span v-if="scope.row.regStatus == 4">已退号</span>
        <span v-if="scope.row.regStatus == 5">作废</span>
      </template>
    </el-table-column>
    <el-table-column property="createTime" label="就诊日期" />
    <el-table-column label="挂号类型">
      <template #default="scope">
        <span v-if="scope.row.schedulingType == 1">门诊</span>
        <span v-else-if="scope.row.schedulingType == 2">门诊+病例本</span>
        <span v-else-if="scope.row.schedulingType == 3">急诊</span>
        <span v-else-if="scope.row.schedulingType == 4">急诊+病例本</span>
        <span v-else-if="scope.row.schedulingType == 5">孕诊</span>
        <span v-else-if="scope.row.schedulingType == 6">孕诊+病例本</span>
      </template>
    </el-table-column>
    <el-table-column label="挂号时段">
      <template #default="scope">
        <span v-if="scope.row.subsectionType == 1">上午</span>
        <span v-else-if="scope.row.subsectionType == 2">下午</span>
        <span v-else-if="scope.row.subsectionType == 3">晚上</span>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small" v-if="scope.row.regStatus == 0" type="primary" @click="registrationFee(scope.$index, scope.row)">
          收费
        </el-button>
        <el-button size="small" v-if="scope.row.regStatus == 0" type="primary" @click="registeredRefund(scope.$index, scope.row)">
          退费
        </el-button>
        <span v-else>&nbsp;</span>
      </template>
    </el-table-column>
  </el-table>

  <!-- 分页 -->
  <el-row justify="center">
    <el-col :span="12" :offset="6">
      <el-pagination background layout="prev, pager,next,total" :total="total" :page-size="pageSize"
        v-model:current-page="pageNum" @current-change="handleCurrentChange" />
    </el-col>
  </el-row>

  <!-- 修改模态框 -->
  <el-dialog v-model="dialogFormVisible" title="请扫二维码缴费" width="450" style="text-align: center;">
    <img src="D:\vue\src\assets\img\jiji.png" alt="" style="width: 400px; margin: auto;">
    <template #footer>
      <div class="dialog-footer" >
        <el-button @click="dialogFormVisible = false">关闭</el-button>
        <el-button type="primary" @click="confirmCharges">
          确认收费
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<style scoped></style>
